<template>
  <s-clean-layout title="还款记录" navbar="normal">
    <view class="repayment-container">
      <!-- 还款记录列表 -->
      <scroll-view scroll-y class="repayment-list">
        <view 
          class="repayment-item" 
          v-for="(item, index) in repaymentRecords" 
          :key="index"
          @tap="viewRepaymentDetail(item.id)"
        >
          <view class="repayment-info">
            <view class="repayment-date">{{ item.repaymentDate }}</view>
            <view class="repayment-amount">
              <text class="amount-value">{{ item.amount }}</text>
              <text class="amount-label">元</text>
            </view>
          </view>
          <view class="repayment-detail">
            <view class="repayment-method">{{ getRepaymentMethodText(item.repaymentMethod) }}</view>
            <view class="repayment-account">{{ getAccountTypeText(item.accountType) }}</view>
          </view>
          <view class="repayment-remark" v-if="item.remark">{{ item.remark }}</view>
        </view>
      </scroll-view>
      
      <!-- 添加悬浮按钮 -->
      <view class="add-button" @tap="addRepaymentRecord">
        <uni-icons type="plusempty" size="24" color="#FFFFFF"></uni-icons>
      </view>
    </view>
  </s-clean-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import BorrowApi from '@/pages/money/api/borrow';

// 页面参数
const borrowRecordId = ref(0);

// 还款记录数据
const repaymentRecords = ref([]);

// 页面加载时获取数据
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const { borrowRecordId: id } = currentPage.options;
  borrowRecordId.value = id;
  fetchRepaymentRecords();
});

// 获取还款记录
const fetchRepaymentRecords = async () => {
  try {
    const response = await BorrowApi.queryRepayRecords({ borrowRecordId: borrowRecordId.value });
    
    if (response.code === 0 && response.data) {
      repaymentRecords.value = response.data.map(item => ({
        id: item.id,
        repaymentDate: formatDate(item.repaymentDate),
        amount: item.amount,
        repaymentMethod: item.repaymentMethod,
        accountType: item.accountType,
        remark: item.remark
      }));
    } else {
      uni.showToast({
        title: response.msg || '获取还款记录失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取还款记录失败:', error);
    uni.showToast({
      title: '获取还款记录失败',
      icon: 'none'
    });
  }
};

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 获取还款方式文本
const getRepaymentMethodText = (method) => {
  const methodMap = {
    1: '现金',
    2: '转账',
    3: '其他'
  };
  return methodMap[method] || '其他';
};

// 获取账户类型文本
const getAccountTypeText = (type) => {
  const typeMap = {
    'WCHAT': '微信',
    'ALIPAY': '支付宝',
    'MONEY': '现金',
    'BANK_CARD': '银行卡',
    'OTHER': '其他'
  };
  return typeMap[type] || '其他';
};

// 查看还款记录详情
const viewRepaymentDetail = (id) => {
  sheep.$router.go('/pages/money/repayment-edit', {
    id: id,
    borrowRecordId: borrowRecordId.value
  });
};

// 添加还款记录
const addRepaymentRecord = () => {
  sheep.$router.go('/pages/money/repayment-edit', {
    borrowRecordId: borrowRecordId.value
  });
};

// 移除不再需要的goBack方法
// const goBack = () => {
//   uni.navigateBack();
// };
</script>

<style lang="scss" scoped>
.repayment-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative; /* 添加相对定位，作为悬浮按钮的参考 */
  padding-top: 20rpx; /* 添加顶部间距 */
}

/* 移除原有的导航栏样式 */
.nav-bar {
  display: none;
}

.back-btn, .add-btn {
  display: none;
}

.page-title {
  display: none;
}

.repayment-list {
  flex: 1;
  background-color: #f5f5f5;
  padding: 30rpx;
  overflow-y: auto;
  box-sizing: border-box;
  height: calc(100vh - 200rpx); /* 设置固定高度 */
}

.repayment-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.repayment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.repayment-date {
  font-size: 28rpx;
  color: #666;
}

.repayment-amount {
  display: flex;
  align-items: baseline;
}

.amount-value {
  font-size: 36rpx;
  color: #ff6b6b;
  font-weight: 500;
}

.amount-label {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.repayment-detail {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.repayment-method, .repayment-account {
  font-size: 26rpx;
  color: #666;
}

.repayment-remark {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 添加悬浮按钮样式 */
.add-button {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #007AFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
  z-index: 100;
}
</style>